<template>
  <div class="p-4">
    <Form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 14 }"
    >
      <FormItem label="项目名称" name="name">
        <a-input v-model:value="formState.name" />
      </FormItem>
      <FormItem label="项目编码" name="code" v-if="!route.query?.id">
        <div class="code_div">
          <a-input disabled :value="companyCode" style="width: auto; text-align: center" />
          <a-input v-model:value="formState.code" @input="codeInputFn" style="margin-left: 20px" />
        </div>
      </FormItem>
      <!-- <FormItem label="项目金额" name="amount">
        <InputNumber id="inputNumber" v-model:value="formState.amount" :precision="2" :min="0" />
      </FormItem> -->

      <FormItem label="项目地址" name="address">
        <a-textarea v-model:value="formState.address" />
      </FormItem>
      <FormItem label="项目甲方" name="firstParty">
        <a-input v-model:value="formState.firstParty" />
      </FormItem>
      <!-- <FormItem label="验收内容" name="checkContent">
        <a-textarea v-model:value="formState.checkContent" />
      </FormItem>
      <FormItem label="验收时间" name="checkDate">
        <DatePicker
          :format="'YYYY-MM-DD'"
          valueFormat="YYYY-MM-DD"
          v-model:value="formState.checkDate"
        />
      </FormItem>
      <FormItem label="合同附件" name="contractList">
        <Upload
          :multiple="true"
          :before-upload="beforeUpload"
          :file-list="formState.contractList"
          @change="handleChange"
        >
          <a-button>
            <upload-outlined></upload-outlined>
            上传附件
          </a-button>
        </Upload>
      </FormItem>
      <FormItem label="出图类型" name="designType">
        <a-input v-model:value="formState.designType" :maxlength="100" />
      </FormItem>
      <FormItem label="出图时间" name="designDate">
        <DatePicker
          :format="'YYYY-MM-DD'"
          valueFormat="YYYY-MM-DD"
          v-model:value="formState.designDate"
        />
      </FormItem>
      <FormItem label="开票信息" name="invoice">
        <a-textarea v-model:value="formState.invoice" />
      </FormItem> -->
      <FormItem :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="submit">提交</a-button>
        <a-button style="margin-left: 10px" @click="cancelFn">取消</a-button>
      </FormItem>
    </Form>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  // import { Form, FormItem, DatePicker, Upload, message, InputNumber } from 'ant-design-vue';
  import { Form, FormItem, message, InputNumber } from 'ant-design-vue';
  import {
    // fileUploadApi,
    updataProjectManagementList,
    addProjectManagementList,
    // fileViewApi,
    getMyCompanyInfoApi,
  } from '/@/api/projectManagement';
  import { useRouter, useRoute } from 'vue-router';

  let router = useRouter();
  let route = useRoute();

  onMounted(() => {
    console.log(route.query, 'query');
    getMyCompanyInfoFn();
    if (route.query.id) {
      for (let key in formState.value) {
        formState.value[key] = route.query[key];
      }
      // fileViewApi(formState.value.contract).then((res) => {
      //   let nameExtension = formState.value.contract.split('.')[1];
      //   let file = new File([res], `合同附件.${nameExtension}`, { type: nameExtension }); // 创建一个File对象
      //   file.uid = 'v-' + Date.now();
      //   formState.value.contractList = [file];
      //   console.log(file, '图片');
      // });
    }
  });

  const companyCode = ref('');
  const getMyCompanyInfoFn = () => {
    getMyCompanyInfoApi().then((res) => {
      companyCode.value = res?.projectCode || '';
    });
  };

  const formState = ref({
    name: '', //名称
    code: '', //项目编码
    amount: '', //金额
    address: '', //地址
    firstParty: '', //甲方
    // checkContent: '', //验收内容
    // checkDate: '', //验收时间
    // contract: '', //合同附件Url
    // contractList: [], //合同附件列表
    // designType: '', //出图类型
    // designDate: '', //出图时间
    // invoice: '', //开票信息
  });
  // let validatePass2 = () => {
  //   console.log(formState.value.contractList.length, 'length');
  //   if (formState.value.contractList.length <= 0) {
  //     return Promise.reject('请上传合同附件');
  //   } else {
  //     return Promise.resolve();
  //   }
  // };
  const rules = {
    name: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
    code: [{ required: true, message: '请输入项目编码', trigger: 'blur' }],
    amount: [{ required: true, message: '请输入金额' }],
    address: [{ required: true, message: '请输入地址' }],
    firstParty: [{ required: true, message: '请输入甲方' }],
    // checkContent: [{ required: true, message: '请输入验收内容' }],
    // checkDate: [{ required: true, message: '请选择验收时间' }],
    // contractList: [{ required: true, message: '请上传合同附件', trigger: 'change' }],
    // contractList: [{ required: true, validator: validatePass2, trigger: 'change' }],
    // designType: [{ required: true, message: '请输入出图类型' }],
    // designDate: [{ required: true, message: '请选择出图时间' }],
    // invoice: [{ required: true, message: '请输入开票信息' }],
  };

  // const beforeUpload = (file) => {
  //   let formData = new FormData();
  //   formData.append('file', file);
  //   fileUploadApi(formData).then((res) => {
  //     formState.value.contractList = [file];
  //     formState.value.contract = res;
  //     formRef.value.clearValidate('contractList');
  //   });
  //   // console.log(formState.value.contract, 'contract');
  //   // if (res) {
  //   //   fileViewApi(res).then((res) => {});
  //   // }
  //   // axios({
  //   //   method: 'POST',
  //   //   url: '/api/v1/file/upload',
  //   //   headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  //   //   data: formData,
  //   // }).then((res) => {
  //   //   debugger;
  //   //   fileViewApi({
  //   //     url: res.data.data,
  //   //   }).then((res) => {
  //   //     console.log(res, 'res');
  //   //   });
  //   // });

  //   return false;
  // };

  // 上传文件 change事件
  // const handleChange = (info) => {
  //   console.log(info, 'info');

  //   if (info.file.status == 'removed') {
  //     formState.value.contractList = [];

  //   }
  // };
  // 禁止输入数字以外字符
  const codeInputFn = () => {
    console.log(formState.value.code, 'code');
    formState.value.code = formState.value.code.replace(/\D/g, '');
  };

  const formRef = ref();
  // 提交
  const submit = async () => {
    formRef.value.validate().then(() => {
      let data = { ...formState.value };
      data.amount = String(formState.value.amount);
      if (!route.query.id) {
        addProjectManagementList(data)
          .then(() => {
            message.success('添加成功');
            router.back();
          })
          .catch(() => {
            message.success('添加失败');
          });
      } else {
        data.id = route.query.id;
        updataProjectManagementList(data)
          .then(() => {
            message.success('修改成功');
            // router.push('/dashboard/workbench');
            router.back();
          })
          .catch(() => {
            message.success('修改失败');
          });
      }
    });

    console.log(formState.value, 'formState');
  };

  const cancelFn = () => {
    router.push('/dashboard/workbench');
  };
</script>

<style lang="less" scoped>
  .code_div {
    display: flex;
    align-items: center;
  }
</style>
